<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/me.css">

</head>
<style th:inline="css">
    body {
        background-image: url('http://p5.qhimg.com/bdr/__85/t0164ff9a74a9ba5334.jpg') !important;
        background-size: 100% 800px !important;
        background-attachment: fixed !important;
        background-repeat: no-repeat !important;
    }
</style>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(2)"></nav>

<!--中间内容-->
<div class="m-padded-tb-max m-container animate__animated animate__fadeInUp">
    <!--分类栏-->
    <div class="ui center aligned segment">
        <h1 class="ui m-font-kt"><i class="ui lightbulb outline icon"></i>分类</h1>
        <div class="ui divider"></div>
        <a th:each="type : ${types}" style="margin: 10px !important;"
           href="#" th:href="@{/types/{id}(id=${type.id})}"
           th:classappend="${type.id==activeTypeId} ? 'active' : ''"
           class="ui inverted brown button" th:text="${type.name}">物联网
        </a>
    </div>
    <!--文章栏-->
    <div class="ui link three stackable cards">
        <div class="card" th:each="blog : ${page.content}">
            <div class="image">
                <!--原创/转载Label-->
                <div class="ui top right attached label" th:text="${blog.flag}">原创</div>
                <a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
                    <img src="https://picsum.photos/id/1015/700/500" th:src="@{${blog.firstPicture}}"
                         style="width: 100% !important;height: 220px!important;">
                </a>
                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                    <span class="m-title" th:text="${blog.title}">旅行日记（一）</span>
                </a>
            </div>
            <div class="content">
                <div class="description" th:text="|${blog.description}......|"
                     style="display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden">
                    如果问世间上还有真正的“香格里拉”吗？那么这个地方一定是不丹王国！这是一块心灵的福地，是崇尚高雅与纯洁的精神乐园，因为这里有经幡、有寺庙、有僧侣；不丹就像一个不食人间烟火的孩子，纯净清澈，质朴天然，有信仰，有自由......
                </div>
            </div>
            <!--卡片底部作者及浏览标签-->
            <div class="extra content m-padded-tb-large">
                <div class="ui middle aligned grid">
                    <div class="ui mini horizontal link list">
                        <div class="item">
                            <span><i class="user circle outline icon"></i></span>
                            <span class="m-text-t1" th:text="${blog.user.nickname}">颜云华</span>
                        </div>
                        <div class="item">
                            <span><i class="comment alternate outline icon"></i></span>
                            <span th:text="${blog.commentCount}">12</span>
                        </div>
                        <div class="item">
                            <span><i class="eye icon"></i></span>
                            <span th:text="${blog.views}">222</span>
                        </div>
                        <div class="item">
                            <span><i class="folder outline icon"></i></span>
                            <span th:text="${blog.type.name}">旅行日记</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底部分页-->
    <div style="text-align: center" class="m-margin-tb-big" th:if="${page.totalPages}>1">
        <a href="#" th:href="@{'/types/'+${activeTypeId}(page=${page.number}-1)}"
           class="ui large inverted circular icon button" th:unless="${page.first}">
            <i class="left orange chevron icon"></i></a>
        &nbsp;&nbsp;&nbsp;
        <a href="#" th:href="@{'/types/'+${activeTypeId}(page=${page.number}+1)}"
           class="ui large inverted circular icon button" th:unless="${page.last}">
            <i class="right orange chevron icon"></i></a>
    </div>
</div>

<!--底部footer-->
<footer th:replace="_fragments :: footer"></footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--------板娘模板-------->
<script src="https://cdn.jsdelivr.net/gh/Fog-Forest/live2d@1.0.2/live2d_load/autoload.js"></script>
<!--/*/</th:block>/*/-->


<!--导航的手机端按钮的响应页面-->
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    })
    ;
</script>


</body>
</html>